<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 调用两个子组件
        <child-one v-if="type==='child-one'"></child-one>
        <child-two v-if="type==='child-two'"></child-two> -->

        <!-- 动态组件绑定 -->
        <!-- 根据type的值动态的更改组件 -->
        <component :is="type"></component>

        <!-- 点击change，两个组件交替显示 -->
        <button @click="handleBtnClick">change</button>
    </div>

    <script>
        // 创建两个子组件
        Vue.component('child-one', {
            // v-once：被渲染后直接放到内存里，在点击切换时直接从内存里取，性能更高
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: "#app",
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function () {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            },
        })
    </script>
</body>

</html>